<!-- 账号密码登录页 -->
<template>
    <view class="uni-content">
        <view class="login-logo">
            <image :src="logo"></image>
        </view>
        <!-- 顶部文字 -->
        <text class="title title-box">账号密码登录</text>
        <uni-forms>
            <uni-forms-item name="username">
                <uni-easyinput :focus="focusUsername" @blur="focusUsername = false" class="input-box"
                    :inputBorder="false" v-model="username" placeholder="请输入手机号/用户名/邮箱" />
            </uni-forms-item>
            <uni-forms-item name="password">
                <uni-easyinput :focus="focusPassword" @blur="focusPassword = false" class="input-box" clearable
                    type="password" :inputBorder="false" v-model="password" placeholder="请输入密码" />
            </uni-forms-item>
        </uni-forms>
        <uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
        <!-- 带选择框的隐私政策协议组件 -->
        <uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements>
        <button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
        <!-- 忘记密码 -->
        <view class="link-box">
            <view v-if="!config.isAdmin">
                <text class="forget">忘记了？</text>
                <text class="link" @click="toRetrievePwd">找回密码</text>
            </view>
            <text class="link" @click="toRegister">{{config.isAdmin ? '注册管理员账号': '注册账号'}}</text>
            <!-- <text class="link" @click="toRegister" v-if="!config.isAdmin">注册账号</text> -->
        </view>
        <!-- 悬浮登录方式组件 -->
        <uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
    </view>
</template>

<script>
    import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
    const uniIdCo = uniCloud.importObject("uni-id-co", {
        errorOptions: {
            type: 'toast'
        }
    })
    export default {
        mixins: [mixin],
        data() {
            return {
                "password": "",
                "username": "",
                "captcha": "",
                "needCaptcha": false,
                "focusUsername": false,
                "focusPassword": false,
                // "logo": "/static/logo.png"
            }
        },
        onShow() {
            // #ifdef H5
            document.onkeydown = event => {
                var e = event || window.event;
                if (e && e.keyCode == 13) { //回车键的键值为13
                    this.pwdLogin()
                }
            };
            // #endif
        },
        methods: {
            // 页面跳转，找回密码
            toRetrievePwd() {
                let url = '/uni_modules/uni-id-pages/pages/retrieve/retrieve'
                //如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
                if (/^1\d{10}$/.test(this.username)) {
                    url += `?phoneNumber=${this.username}`
                }
                uni.navigateTo({
                    url
                })
            },
            /**
             * 密码登录
             */
            pwdLogin() {
                if (!this.password.length) {
                    this.focusPassword = true
                    return uni.showToast({
                        title: '请输入密码',
                        icon: 'none',
                        duration: 3000
                    });
                }
                if (!this.username.length) {
                    this.focusUsername = true
                    return uni.showToast({
                        title: '请输入手机号/用户名/邮箱',
                        icon: 'none',
                        duration: 3000
                    });
                }
                if (this.needCaptcha && this.captcha.length != 4) {
                    this.$refs.captcha.getImageCaptcha()
                    return uni.showToast({
                        title: '请输入验证码',
                        icon: 'none',
                        duration: 3000
                    });
                }

                if (this.needAgreements && !this.agree) {
                    return this.$refs.agreements.popup(this.pwdLogin)
                }

                let data = {
                    "password": this.password,
                    "captcha": this.captcha
                }

                if (/^1\d{10}$/.test(this.username)) {
                    data.mobile = this.username
                } else if (/@/.test(this.username)) {
                    data.email = this.username
                } else {
                    data.username = this.username
                }

                uniIdCo.login(data).then(e => {
                    this.loginSuccess(e)
                }).catch(e => {
                    if (e.errCode == 'uni-id-captcha-required') {
                        this.needCaptcha = true
                    } else if (this.needCaptcha) {
                        //登录失败，自动重新获取验证码
                        this.$refs.captcha.getImageCaptcha()
                    }
                })
            },
            /* 前往注册 */
            toRegister() {
                uni.navigateTo({
                    url: this.config.isAdmin ? '/uni_modules/uni-id-pages/pages/register/register-admin' :
                        '/uni_modules/uni-id-pages/pages/register/register',
                    fail(e) {
                        console.error(e);
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/uni_modules/uni-id-pages/common/login-page.scss";

    @media screen and (min-width: 690px) {
        .uni-content {
            height: auto;
        }
    }

    .forget {
        font-size: 12px;
        color: #8a8f8b;
    }

    .link-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
    }

    .link {
        font-size: 12px;
    }
</style>